<template>
  <el-container class="app-container">
    <!--   顶部搜索栏   -->
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-row :gutter="20">
        <el-col :span="14" :push="2">
<!--          <el-form-item label="部门">-->
<!--            <el-select v-model="queryParams.department" clearable placeholder="部门">-->
<!--              <el-option label="东北" value="东北" />-->
<!--              <el-option label="华北" value="华北" />-->
<!--              <el-option label="华东" value="华东" />-->
<!--              <el-option label="华南" value="华南" />-->
<!--              <el-option label="华中" value="华中" />-->
<!--              <el-option label="华西" value="华西" />-->
<!--            </el-select>-->
<!--          </el-form-item>-->
          <el-form-item label="类型">
            <el-select v-model="queryParams.type" clearable placeholder="类型">
              <el-option label="员工" value="员工" />
              <el-option label="经理" value="经理" />
              <el-option label="司机" value="司机" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="fetchData(pageParam, queryParams)">
              <i class="el-icon-zoom-in" />
              <span>查询</span>
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="4" :push="2">
          <el-button type="success" round @click="dialogAddFormVisible=true">
            <i class="el-icon-circle-plus-outline" />
            <span>新增员工</span>
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <!--    表格    -->
    <el-main>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="" width="95">
          <template slot-scope="scope">
            {{ scope.$index }}
          </template>
        </el-table-column>
        <el-table-column label="工号">
          <template slot-scope="scope">
            {{ scope.row.empId }}
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="110" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系方式" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.phone }}
          </template>
        </el-table-column>
        <el-table-column label="员工类型" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.type }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="地址" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.province + scope.row.city + scope.row.district + scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" @click="openEditEmp(scope.$index)">编辑</el-button>
            <el-button type="danger" @click="deleteEmp(scope.row.empId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="编辑员工信息" :visible.sync="dialogFormVisible" center>
        <el-form :model="empInfoForm">
          <el-form-item label="工号" :label-width="formLabelWidth">
            <el-input v-model="empInfoForm.empId" autocomplete="off" disabled />
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="empInfoForm.name" autocomplete="off" />
          </el-form-item>
<!--          <el-form-item label="部门" :label-width="formLabelWidth">-->
<!--            <el-select v-model="empInfoForm.department" clearable placeholder="请选择员工部门">-->
<!--              <el-option label="东北" value="东北" />-->
<!--              <el-option label="华北" value="华北" />-->
<!--              <el-option label="华东" value="华东" />-->
<!--              <el-option label="华南" value="华南" />-->
<!--              <el-option label="华中" value="华中" />-->
<!--              <el-option label="华西" value="华西" />-->
<!--            </el-select>-->
<!--          </el-form-item>-->
          <el-form-item label="类型" :label-width="formLabelWidth">
            <el-select v-model="empInfoForm.type" clearable placeholder="请选择员工类型">
              <el-option label="员工" value="员工" />
              <el-option label="经理" value="经理" />
              <el-option label="司机" value="司机" />
            </el-select>
          </el-form-item>
          <el-form-item label="联系方式" :label-width="formLabelWidth" prop="phone">
            <el-input v-model="empInfoForm.phone" autocomplete="off" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editEmp">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="新增员工信息" :visible.sync="dialogAddFormVisible" center>
        <el-form :model="empInfoForm" inline status-icon>
          <el-form-item label="工号" :label-width="formLabelWidth" prop="empId">
            <el-input v-model="empInfoForm.empId" autocomplete="off" />
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
            <el-input v-model="empInfoForm.name" autocomplete="off" />
          </el-form-item>
<!--          <el-form-item label="部门" :label-width="formLabelWidth" prop="department">-->
<!--            <el-select v-model="empInfoForm.department" clearable placeholder="请选择员工部门">-->
<!--              <el-option label="东北" value="东北" />-->
<!--              <el-option label="华北" value="华北" />-->
<!--              <el-option label="华东" value="华东" />-->
<!--              <el-option label="华南" value="华南" />-->
<!--              <el-option label="华中" value="华中" />-->
<!--              <el-option label="华西" value="华西" />-->
<!--            </el-select>-->
<!--          </el-form-item>-->
          <el-form-item label="类型" :label-width="formLabelWidth" prop="type">
            <el-select v-model="empInfoForm.type" clearable placeholder="请选择员工类型">
              <el-option label="员工" value="员工" />
              <el-option label="经理" value="经理" />
              <el-option label="司机" value="司机" />
            </el-select>
          </el-form-item>
          <el-form-item label="权限" :label-width="formLabelWidth" prop="role">
            <el-select v-model="empInfoForm.role" clearable placeholder="请选择员工权限">
              <el-option label="经理" value="manager" />
              <el-option label="员工" value="user" />
            </el-select>
          </el-form-item>
          <el-form-item label="联系方式" :label-width="formLabelWidth" prop="phone">
            <el-input v-model="empInfoForm.phone" autocomplete="off" />
          </el-form-item>
          <el-form-item label="省" :label-width="formLabelWidth">
            <el-input v-model="empInfoForm.province" autocomplete="off" />
          </el-form-item>
          <el-form-item label="市" :label-width="formLabelWidth">
            <el-input v-model="empInfoForm.city" autocomplete="off" />
          </el-form-item>
          <el-form-item label="区" :label-width="formLabelWidth">
            <el-input v-model="empInfoForm.district" autocomplete="off" />
          </el-form-item>
          <el-form-item label="详细地址" :label-width="formLabelWidth">
            <el-input v-model="empInfoForm.address" autocomplete="off" />
          </el-form-item>
          <el-form-item label="身份证号码" :label-width="formLabelWidth">
            <el-input v-model="empInfoForm.idCard" autocomplete="off" />
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addEmp">立即创建</el-button>
        </div>
      </el-dialog>
    </el-main>
    <!--    底部分页    -->
    <el-footer>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="pageParam.current"
        :page-size="pageParam.size"
        style="display: flex;align-items: center;justify-content: center;"
        @current-change="changePage($event)"
      />
    </el-footer>
  </el-container>

</template>

<script>

import { getEmployeeList } from '@/api/table'
import { deleteEmployee, editEmployee, addEmployee } from '@/api/employee'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      dialogFormVisible: false,
      dialogAddFormVisible: false,
      formLabelWidth: '60px',
      total: 0,
      empInfoForm: {
        index: '',
        id: '',
        empId: '',
        name: '',
        phone: '',
        province: '',
        city: '',
        district: '',
        address: '',
        department: '',
        type: ''
      },
      queryParams: {
        type: '',
        department: ''
      },
      pageParam: {
        size: 6,
        current: 1
      },
      rules: {
        empId: [
          { required: true, message: '请输入工号', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入员工姓名', trigger: 'blur' }
        ],
        department: [
          { required: true, message: '请输入员工部门', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请输入员工类型', trigger: 'blur' }
        ],
        role: [
          { required: true, message: '请输入员工权限', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入员工联系方式', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入正确的手机号码', trigger: 'blur' }
        ]

      }
    }
  },
  created() {
    this.fetchData(this.pageParam)
  },
  methods: {
    fetchData(page, vo = { }) {
      this.listLoading = true
      const empParam = JSON.parse(JSON.stringify(vo))
      if (!empParam?.type) {
        delete empParam.type
      }
      if (!empParam?.department) {
        delete empParam.department
      }
      const params = {}
      params['current'] = page.current
      params['size'] = page.size
      if (empParam?.type) {
        params['type'] = empParam['type']
      }
      if (empParam?.department) {
        params['department'] = empParam['department']
      }
      getEmployeeList(params).then(response => {
        const content = response.content
        console.log(content)
        this.list = content.records
        this.total = content.total
        this.pageParam.current = content.current
        this.pageParam.size = content.size
        this.listLoading = false
      }).catch(error => {
        console.log(error)
      })
    },
    deleteEmp(empId) {
      this.$confirm('此操作将永久删除工号为' + empId + '的员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(empId)
        deleteEmployee({ empId: empId }).then(response => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    openEditEmp(index) {
      this.dialogFormVisible = true
      this.empInfoForm = this.list[index]
      this.empInfoForm.index = index
    },
    editEmp() {
      editEmployee(this.empInfoForm).then(response => {
        this.dialogFormVisible = false
        this.list[this.empInfoForm['index']] = this.empInfoForm
      })
    },
    addEmp() {
      // this.$refs.empInfoForm.validate((valid) => {
      //   if (valid) {
      //
      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
      addEmployee(this.empInfoForm).then(response => {
        console.log(response)
        this.dialogAddFormVisible = false
        this.list.push(this.empInfoForm)
      })
    },
    changePage(event) {
      // console.log(event)
      this.pageParam.current = event
      this.fetchData(this.pageParam, this.vo)
    }
  }
}
</script>
